<!-- pages/index/index.vue -->
<script setup lang="ts"></script>
<template>
	<scroll-page>
		<view class="index-page" :style="{ backgroundPositionY: '-48px' }">
			<!-- 页面导航 -->
			<view class="page-navbar">优医</view>

			<!-- 搜索栏 -->
			<view class="search-bar">
				<input
					placeholder-class="input-placeholder"
					placeholder="搜一搜: 疾病/症状/医生/健康知识"
					class="input"
					type="text"
				/>
				<view class="icon-search">
					<uni-icons size="22" color="#C3C3C5" type="search" />
				</view>
			</view>
			<!-- 快速入口 -->
			<view class="quick-entry">
				<navigator hover-class="none" url="" class="quick-entry-item">
					<view class="">
						<image class="quick-entry-icon" src="/static/images/quick-entry-1.png" />
						<text class="label">问医生</text>
					</view>
					<text class="small">按科室查问医生</text>
				</navigator>
				<navigator
					url="/subpkg_consult/quickly/quickly?type=2"
					hover-class="none"
					class="quick-entry-item"
				>
					<view class="">
						<image class="quick-entry-icon" src="/static/images/quick-entry-2.png" />
						<text class="label">极速问诊</text>
					</view>
					<text class="small">20s医生极速回复</text>
				</navigator>
				<navigator hover-class="none" url="" class="quick-entry-item">
					<view class="">
						<image class="quick-entry-icon" src="/static/images/quick-entry-3.png" />
						<text class="label">开药门诊</text>
					</view>
					<text class="small">线上买药更方便</text>
				</navigator>
			</view>
			<!-- 快速查看 -->
			<view class="quick-view">
				<navigator hover-class="none" url="/subpkg_medicine/order_list/index">
					<view class="quick-view-item">
						<image class="quick-view-icon" src="/static/images/quick-view-1.png" />
						<text class="label">药品订单</text>
					</view>
				</navigator>
				<navigator hover-class="none" url="/subpkg_archive/list/index">
					<view class="quick-view-item">
						<image class="quick-view-icon" src="/static/images/quick-view-2.png" />
						<text class="label">健康档案</text>
					</view>
				</navigator>
				<navigator hover-class="none">
					<view class="quick-view-item">
						<image class="quick-view-icon" src="/static/images/quick-view-3.png" />
						<text class="label">我的处方</text>
					</view>
				</navigator>
				<navigator hover-class="none">
					<view class="quick-view-item">
						<image class="quick-view-icon" src="/static/images/quick-view-4.png" />
						<text class="label">疾病查询</text>
					</view>
				</navigator>
			</view>
			<!-- 广告位 -->
			<view class="banner-placeholder">
				<swiper
					class="uni-swiper"
					indicator-dots
					indicator-color="#ffffff99"
					indicator-active-color="#fff"
					circular
				>
					<swiper-item>
						<navigator hover-class="none" class="navigator" url=" ">
							<image class="banner-image" src="/static/images/banner-1.png" />
						</navigator>
					</swiper-item>
					<swiper-item>
						<navigator hover-class="none" class="navigator" url=" ">
							<image
								class="banner-image"
								src="/static/images/banner-1.png"
								mode="aspectFill"
							/>
						</navigator>
					</swiper-item>
				</swiper>
			</view>
			<!-- 标签页列表 -->
			<custom-tabs></custom-tabs>

			<!-- 列表 -->
			<view class="feed-list">
				<view class="feed-list-item" v-for="item in 10" :key="item">
					<view class="feed-meta">
						<image class="doctor-avatar" src="/static/uploads/doctor-avatar.jpg" />
						<view class="doctor-info">
							<text class="name">王医生</text>
							<text class="desc">积水潭 皮肤科 主任医师</text>
						</view>
						<button class="doctor-button" plain>+ 关注</button>
					</view>
					<view class="feed-topic">炎热夏季如何防晒？</view>
					<view class="feed-relation"># 儿童健康</view>
					<view class="feed-content">
						<view class="text">
							炎热的夏季，那大太阳无时不刻在考验着我们的肌肤，过强、过多的阳光中紫外线的
						</view>
						<view class="picture">
							<image
								mode="aspectFill"
								class="uni-image"
								src="/static/uploads/feed-1.jpeg"
							/>
							<image
								mode="aspectFill"
								class="uni-image"
								src="/static/uploads/feed-2.jpeg"
							/>
							<image
								mode="aspectFill"
								class="uni-image"
								src="/static/uploads/feed-3.jpeg"
							/>
						</view>
					</view>
					<view class="feed-extra">
						<text>12 收藏</text>
						<text>120 评论</text>
					</view>
				</view>
			</view>
		</view>
	</scroll-page>
</template>

<style lang="scss">
	@import './index.scss';
</style>
